@charset "utf-8";
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}

.page05{
    overflow: hidden;
    position:relative;
    .page05-border{
        img{
            @extend .position-margin;
            top:180px;
            left:-30px;
        }
    }
    .content-border{
        @extend .position-margin;
        top:180px;
        left:-30px;
        width:190px;
        height:190px;
        .page05-mother-speech01{
            @extend .position-margin;
            left:-40px;
//          top:-130px;
            top:-200%;
            opacity: 0;
            
        }
        .page05-mother{
            @extend .position-margin;
//          left:-50px;
            left:400%;
            top:-13px;
            opacity: 0;
        }
        .page05-mother-speech02{
            @extend .position-margin;
//          left:160px;
//          top:30px;
            left:180px;
            top:-10px;
            transform: rotateZ(50deg);
            opacity: 0;
        }
        .page05-mother-ball{
            @extend .position-margin;
            left:15px;
            top:73px;
            opacity: 0;
        }
        .page05-mother-ball2{
            @extend .position-margin;
            left:-110px;
            top:15px;
            z-index: 99;
            opacity: 0;
            transform-origin: left;

        }
        .page05-daughter{
            @extend .position-margin;
//          left:-160px;
            left:300%;
            top:-70px;
            z-index: 98;
            opacity: 0;
        }
        .page05-daughter2{
            @extend .position-margin;
            left:-160px;
            top:-70px;
            z-index: 98;
            opacity: 0;
        }
        .page05-mother-shadow{
            @extend .position-margin;
            bottom:-25px;
            left:170px;
        }
        .page05-mother-shadow2{
            @extend .position-margin;
            top:-20px;
//          left:-30px;
            left:400%;
            opacity: 0;
        }
        .page05-mother-title{
            @extend .position-margin;
            width:270px;
            height:30px;
            background: #0D1744;
            color:white;
            line-height: 30px;
            text-align: center;
            font-size: 12px;
            top:250px;
    //      left:-90px;       
            left:-500%;
            opacity: 0;
        }
        
    }
}

.page05.active{
    .content-border{
        .page05-mother-speech01{
            animation: page05-mother-speech01 600ms ease 1.7s forwards;
        }
        .page05-mother{
            animation: page05-mother 600ms ease 800ms forwards;
        }
        .page05-daughter{
            animation: page05-daughter 600ms ease 900ms forwards;
        }
        .page05-daughter2{
            animation: page05-daughter2 100ms ease 2.7s infinite;
        }
        .page05-mother-speech02{
            animation: page05-mother-speech02 600ms ease 1.1s forwards;
        }
        .page05-mother-ball{
            animation: page05-mother-ball 1.5s ease 1.3s forwards;
        }
        .page05-mother-ball2{
            animation: page05-mother-ball2 500ms ease 2.7s forwards;
        }
        .page05-mother-shadow2{
            animation: page05-mother-shadow2 500ms ease 800ms forwards;    
        }
        .page05-mother-title{
            animation: page05-mother-title 500ms ease 2.6s forwards; 
        }
        
    }
}

//mother
@keyframes page05-mother{
    0%{}
    33%{left:-60px;opacity: 1;}
    66%{left:-35px;opacity: 1;}
    100%{left:-50px;opacity: 1;}
}
//mother

//daughter
@keyframes page05-daughter{
    0%{}
    33%{left:-170px;opacity: 1;}
    66%{left:-150px;opacity: 1;}
    100%{left:-160px;opacity: 1;}
}
//daughter
//daughter2
@keyframes page05-daughter2{
    0%{opacity: 1;}
    50%{left:-161px;opacity: 1;}
    100%{left:-159px;opacity: 1;}
}
//daughter2

//speech02
@keyframes page05-mother-speech02{
    0%{}
    20%{left:140px;top:36px;opacity: 1;}
    40%{left:180px;top:5px;opacity:1;}
    60%{left:150px;top:33px;opacity: 1;}
    80%{left:170px;top:10px;opacity: 1;}
    100%{left:160px;top:30px;opacity: 1;}
}
//speech02

//ball
@keyframes page05-mother-ball{
    from{opacity: 0;}to{opacity: 1;}
}
//ball

//ball2
@keyframes page05-mother-ball2{
    from{opacity: 0;}to{opacity: 1;}
}
//ball2

//shadow2
@keyframes page05-mother-shadow2{
    0%{}
    33%{left:-40px;opacity: 1;}
    66%{left:-20px;opacity: 1;}
    100%{left:-30px;opacity: 1;}
}
//shadow2

//speech01
@keyframes page05-mother-speech01{
    0%{}
    33%{top:-130px;opacity: 1;}
    66%{top:-150px;opacity: 1;}
    100%{top:-130px;opacity: 1;}
}
//speech02

//title
@keyframes page05-mother-title{
    0%{}
    33%{opacity:1;left:-5px;}
    66%{opacity:1;left:-35px;}
    100%{
        opacity:1;left:-25px;
    }
}
//title